<template>
  <div class="noticeBase warning" v-if="$route.name=='userCenter' && titleArr.length > 0">
    <!-- :class="{'redWarning':titleArr.length > 0 ? (titleArr[0].noticeType==1) : false,'warning': titleArr.length > 0 ? (titleArr[0].noticeType==2) : false}" -->
    <div class="scrollWrap">
      <p ref="scrollBox" v-for="i in 2" :key="i">
        <b v-for="(item, index) in titleArr" :key="index" @click="toDetail(item)">
          <strong v-if="index!=0">|</strong>
          <span>
            <i class="el-icon-warning"></i>
          </span>
          <span v-if="item.noticeType==1">紧急通知</span>
          <span v-if="item.noticeType==2">普通公告</span>
          <em>{{item.title + ' ' }}</em>
        </b>
      </p>
    </div>
    <div class="noticeAlert" v-if="showNotice">
      <div class="content">
        <noticeAlert :noticeId="noticeId" @readed="showNotice=false"></noticeAlert>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import { mapGetters } from 'vuex'
import noticeAlert from '../../stageNav/notice/base/noticeBase'
export default {
  name: 'NoticeBase',
  components: {
    noticeAlert
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  data () {
    return {
      titleArr: [],
      time: '',
      showNotice: false,
      noticeId: ''
    }
  },
  methods: {
    toDetail (row) {
      this.$router.push({ name: 'noticeDetail', query: { noticeId: row.noticeId } })
    },
    getRunNotice () {
      this.$ajax.post('/api/notice/getFloatNoticeListBySubstationId', {
        substationId: this.userInfo.substationId
      }).then((data) => {
        if (data.data.code === '200') {
          this.titleArr = data.data.data
          this.durationTime()
          if (this.titleArr.length > 0 && this.titleArr[0].noticeType === '1') {
            // console.log(1)
            this.noticeId = this.titleArr[0].noticeId
            this.showNotice = true
          }
        } else {
          this.$message({
            type: 'warning',
            message: data.data.message
          })
        }
      }).catch((err) => {
        console.error(err)
        this.$message({
          message: '生意太火爆了, 请稍后再试',
          type: 'error'
        })
      })
    },
    durationTime () {
      let time = 0
      let arr = this.titleArr
      let length = 0
      for (let i = 0; i < arr.length; i++) {
        length = arr[i].title.length + length
      }
      time = (length / 2)
      this.time = time
    }
  },
  created () {
    if (this.userInfo.length !== 0) {
      this.getRunNotice()
    }
  },
  mounted () {
    if (this.$route.name === 'ordersNow' && this.titleArr.length > 0) {
      this.$nextTick(() => {
        this.$refs.scrollBox.style.animationDuration = this.durationTime() + 's'
      })
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.noticeBase
  border-radius 4px
  line-height 1
  // padding 10px 25px
  padding 0 20px
  height 32px
  line-height 32px
  display flex
  span, strong, em, p
    font-size 12px
    line-height 1
    font-weight bold
    color #666666
    letter-spacing 1px
  i
    margin-right 8px
    color #FFAA00
  strong
    margin-right 20px
    margin-left 20px
  .scrollWrap
    flex 1
    overflow hidden
    height 100%
    line-height 32px
    white-space nowrap
    p
      display inline-block
      width auto
      min-width 100%
      cursor pointer
      animation autoScroll 16s 2s linear infinite
      @keyframes autoScroll
        from
          transform translate3d(0, 0, 0)
        to
          transform translate3d(-100%, 0, 0)
      &:hover
        // animation-play-state paused
      b
        margin-right 20px
.redWarning
  background #EBEEF5
  color #F22731
.warning
  // background #EBEEF5
  // color #256EFF
  background #FFF6E6
  border 1px solid #FFEECC
.noticeAlert
  position fixed
  z-index 999
  top 0
  left 0
  width 100%
  height 100%
  background rgba(0, 0, 0, 0.7)
  overflow auto
  .content
    width 600px
    padding 40px 50px
    background #ffffff
    margin 50px auto
    overflow auto
</style>
